<template>
  <div id="app">
    <h1>123</h1>
    <Parent />
    <hr>
    <Brother/>
    <hr>
    <Suspense>
      <template #fallback>
        <h1>正在加载...</h1>
      </template>
      <template #default>
        <asyncCom></asyncCom>
      </template>
    </Suspense>
    <hr>
    <Model v-model:msg1="a1" v-model:msg2="a2" />
    <h1>{{a1}}</h1>
    <h1>{{a2}}</h1>
    <hr>
    <ComFirst/>
    <hr>
    <Zidingyi/>
    <hr>
    <Chacao>
      <template v-slot:header>
        <h2 class="header">顶部</h2>
      </template>
      <template v-slot:main>
        <h2 class="main">主体</h2>
      </template>
      <template v-slot="scope">
        <img :src="scope.row.imgSrc" alt="" >
      </template>
    </Chacao>
  </div>
</template>
<script>
  import Parent from './components/Parent.vue';
  import Brother from './components/Brother.vue';

  // 处理异步组件，需要使用vue提供的一个方法defineAsyncComponent

  import {defineAsyncComponent} from "vue"
  import Model from './components/Model.vue';
import ComFirst from './components/ComFirst.vue';
import Zidingyi from './components/zidingyi.vue';
import Chacao from './components/chacao.vue';
  // import AsyncCom from './components/AsyncCom.vue';

  // 定义异步组件
  let asyncCom = defineAsyncComponent(()=>new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve(import("./components/AsyncCom.vue"))
    },2000)
  }))

  export default {
    data(){
      return {
        // asyncCom:null
        a1:"岛田源氏",
        a2:"岛田半藏"
      }
    },
    components: { Parent, Brother, asyncCom, Model, ComFirst, Zidingyi, Chacao },
  }
</script>

